<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../_assets/js/jqm-docs.js"></script>
	<script src="../../js/"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Collapsible content</h1>
		<a href="../../index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<h2>Collapsible content markup</h2>
		<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
		
		<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
	
		<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>

	<pre><code>		
	&lt;div data-role=&quot;collapsible&quot;&gt;
	&lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.&lt;/p&gt;
	&lt;/div&gt;
	</code></pre>	
	

			<div data-role="collapsible">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			</div>


		<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-collapsed="true"</code> attribute to the wrapper.</p>

	<code>		
	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong>
	</code>

		<p>This code will create a collapsible widget like this:</p>
	

			<div data-role="collapsible" data-collapsed="true">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
	
		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>

		<h2>Collapsible example</h2>
		<p>This page has 4 collapsible containers with different types of content inside.</p>
		
		<div data-role="collapsible" data-collapsed="true">
			<h3>Section 1: Collapsed text block</h3>
			<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
		</div><!-- /section 1 -->
		
		<div data-role="collapsible">
			<h3>Section 2: Expanded on load</h3>
			<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
		</div><!-- /section 2 -->
		
		<div data-role="collapsible" data-collapsed="true">
			<h3>Section 3: Form elements</h3>
			<form action="#" method="get">
				<div data-role="fieldcontain">
					<label for="textarea">Textarea:</label>
					<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
				</div>
				<div data-role="fieldcontain">
					<label for="slider">Input slider:</label>
				 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
				</div>
				<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
			    </fieldset>
			</form>
		</div><!-- /section 3 -->
	
		<div data-role="collapsible" data-collapsed="true">
			<h3>Section 4: Collapsed list</h3>
			<ul data-role="listview" data-inset="true" data-theme="d">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
			</ul>
		</div><!-- /section 4 -->
		
		<h2>Nested Collapsibles</h2>
		<div data-role="collapsible">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			<div data-role="collapsible">
				<h3>I'm a nested collapsible header</h3>
				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			</div>
		</div>
		
		<h2>Collapsible sets</h2>
		<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</a></p>
		
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2011 The jQuery Project</p>
</div>
	
</div><!-- /page -->

</body>
</html>